<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="logo">漫拍</view>
      <view class="search-box">
        <input type="text" placeholder="搜索摄影师" v-model="searchKeyword" @input="handleSearch" />
        <text class="iconfont icon-search" @tap="handleSearch">🔍</text>
      </view>
      <text class="iconfont icon-notification" @tap="showMessages">🔔</text>
    </view>

    <!-- 漫展信息 -->
    <view class="exhibition-info">
      <text class="title">2023上海国际动漫展</text>
      <text class="date">2023.11.25-11.26 | 上海世博展览馆</text>
    </view>

    <!-- 筛选栏 -->
    <scroll-view scroll-x class="filter-bar">
      <view 
        v-for="(tab, index) in filterTabs" 
        :key="index" 
        :class="['filter-item', currentTab === index ? 'active' : '']"
        @tap="switchTab(index)"
      >
        {{ tab }}
      </view>
    </scroll-view>

    <!-- 摄影师列表 -->
    <view class="photographer-list">
      <view class="photographer-card" v-for="(item, index) in filteredPhotographers" :key="index" @tap="goToDetail(item.id)">
        <view class="card-image">
          <image :src="item.coverImage" mode="aspectFill"></image>
          <view :class="['status-tag', item.status === '空闲中' ? 'status-free' : 'status-busy']">
            {{ item.status }}
          </view>
        </view>
        <view class="card-content">
          <view class="photographer-info">
            <image :src="item.avatar" class="avatar"></image>
            <view class="info">
              <text class="name">{{ item.name }}</text>
              <view class="rating">
                <text class="iconfont icon-star">⭐</text>
                <text>{{ item.rating }} ({{ item.ratingCount }})</text>
              </view>
            </view>
          </view>
          <view class="card-footer">
            <text class="tag">{{ item.tag }}</text>
            <text class="price">¥{{ item.price }}起</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 消息弹窗 -->
    <view class="message-popup" v-if="showMessagePopup">
      <view class="message-header">
        <text class="message-title">消息通知</text>
        <text class="close-btn" @tap="closeMessages">×</text>
      </view>
      <view class="message-list">
        <view class="message-item" v-for="(msg, index) in messages" :key="index">
          <view class="message-avatar">
            <image :src="msg.avatar"></image>
          </view>
          <view class="message-content">
            <view class="message-name">{{ msg.name }}</view>
            <view class="message-text">{{ msg.content }}</view>
            <view class="message-time">{{ msg.time }}</view>
          </view>
        </view>
        <view class="no-message" v-if="messages.length === 0">
          <text>暂无消息</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentTab: 0,
      showMessagePopup: false,
      filterTabs: ['全部', '空闲中', 'Cosplay', 'Lolita', '汉服', 'JK制服'],
      photographers: [
        {
          id: 1,
          name: '小明摄影',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          coverImage: 'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          rating: 4.9,
          ratingCount: '125条评价',
          status: '空闲中',
          tag: 'Cosplay',
          price: 199
        },
        {
          id: 2,
          name: '小红摄影',
          avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          coverImage: 'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          rating: 4.8,
          ratingCount: '98条评价',
          status: '忙碌中',
          tag: 'Lolita',
          price: 299
        },
        {
          id: 3,
          name: '小蓝摄影',
          avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          coverImage: 'https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          rating: 4.7,
          ratingCount: '87条评价',
          status: '空闲中',
          tag: '汉服',
          price: 249
        },
        {
          id: 4,
          name: '小绿摄影',
          avatar: 'https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          coverImage: 'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          rating: 4.6,
          ratingCount: '76条评价',
          status: '空闲中',
          tag: 'JK制服',
          price: 179
        }
      ],
      messages: [
        {
          id: 1,
          name: '小明摄影',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          content: '您的预约已确认，请准时到达拍摄地点',
          time: '10分钟前'
        },
        {
          id: 2,
          name: '系统通知',
          avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          content: '您有一条新的优惠券，点击查看详情',
          time: '1小时前'
        }
      ]
    }
  },
  computed: {
    filteredPhotographers() {
      let result = this.photographers;
      
      // 根据搜索关键词筛选
      if (this.searchKeyword) {
        result = result.filter(item => 
          item.name.includes(this.searchKeyword) || 
          item.tag.includes(this.searchKeyword)
        );
      }
      
      // 根据当前选中的Tab筛选
      if (this.currentTab !== 0) { // 不是"全部"选项
        const filterType = this.filterTabs[this.currentTab];
        if (filterType === '空闲中') {
          result = result.filter(item => item.status === '空闲中');
        } else {
          result = result.filter(item => item.tag === filterType);
        }
      }
      
      return result;
    }
  },
  methods: {
    goToDetail(id) {
      // 跳转到摄影师详情页
      uni.navigateTo({
        url: `/pages/photographer/photographer?id=${id}`
      });
    },
    handleSearch() {
      // 搜索功能已通过计算属性filteredPhotographers实现
      console.log('搜索关键词:', this.searchKeyword);
    },
    switchTab(index) {
      this.currentTab = index;
      console.log('切换到Tab:', this.filterTabs[index]);
    },
    showMessages() {
      this.showMessagePopup = true;
    },
    closeMessages() {
      this.showMessagePopup = false;
    }
  }
}
</script>

<style>
/* 保留原有样式 */
.container {
  padding-bottom: 30rpx;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.logo {
  font-size: 36rpx;
  font-weight: bold;
  color: #8a2be2;
  margin-right: 20rpx;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
}

.search-box input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
}

.icon-search {
  font-size: 36rpx;
  color: #999;
}

.icon-notification {
  font-size: 40rpx;
  color: #333;
}

.exhibition-info {
  background: linear-gradient(to right, #8a2be2, #ff1493);
  padding: 30rpx;
  color: #fff;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.date {
  font-size: 24rpx;
  opacity: 0.9;
}

.filter-bar {
  display: flex;
  padding: 20rpx 0;
  background-color: #fff;
  white-space: nowrap;
}

.filter-item {
  display: inline-block;
  padding: 10rpx 30rpx;
  margin: 0 10rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 30rpx;
  background-color: #f5f5f5;
}

.filter-item.active {
  background-color: #8a2be2;
  color: #fff;
}

.photographer-list {
  padding: 20rpx;
}

.photographer-card {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-image {
  position: relative;
  height: 300rpx;
}

.card-image image {
  width: 100%;
  height: 100%;
}

.status-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
}

.status-free {
  background-color: #4caf50;
  color: #fff;
}

.status-busy {
  background-color: #ff5252;
  color: #fff;
}

.card-content {
  padding: 20rpx;
}

.photographer-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.icon-star {
  margin-right: 6rpx;
  color: #ffb400;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag {
  font-size: 24rpx;
  color: #8a2be2;
  background-color: #f0e6ff;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.price {
  font-size: 28rpx;
  color: #ff1493;
  font-weight: bold;
}

/* 消息弹窗样式 */
.message-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.message-header {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #8a2be2;
  color: #fff;
  padding: 20rpx 30rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.message-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
}

.message-list {
  width: 80%;
  max-height: 60vh;
  overflow-y: auto;
  background-color: #fff;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  padding: 20rpx;
}

.message-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}

.message-avatar image {
  width: 100%;
  height: 100%;
}

.message-content {
  flex: 1;
}

.message-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.message-text {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.no-message {
  padding: 40rpx 0;
  text-align: center;
  color: #999;
}
</style>